// 页面一加载就渲染列表
const tbody = document.querySelector('tbody')
document.addEventListener('DOMContentLoaded', renderList = async() => {
            const res = await axios({
                url: '/score/list'
            })
            const data = res.data.data
            tbody.innerHTML = Object.keys(data).map(k =>
                    `<tr>
                            <th scope="row">${k}</th>
                            <td>${data[k].name}</td>
                                ${data[k].score.map((item,index)=>`<td class="score" data-index='${index+1}' data-id=${k}>${item}</td>`).join('')}
                                </tr>`
).join('')
                
    //for (let k in data) {    }              
    // 
})

// 分数编辑功能
tbody.addEventListener('click',e =>{
  const et=e.target 
  if(et.className==='score'){ 
    let ipt= document.createElement('input')
    ipt.classList.add('inp')
    ipt.value=et.innerText
    et.appendChild(ipt)
    ipt.focus()

    // 封装页面渲染函数
    const render=async ()=>{
        await axios({
               url:'/score/entry',
               method:'post',
               data:{
                 stu_id:et.dataset.id,
                 batch: et.dataset.index, 
                 score: ipt.value
               }              
             })
             setTimeout(location.reload(),500)
       }

    // 失去焦点事件   
    ipt.addEventListener('blur',(e)=>{
        e.target.remove(),
        render()
        })

    //键盘输入事件
     ipt.addEventListener('keyup', (e)=>{
     if(e.key==='Enter'){
       render()
     }
    })
  }
})